<div class="arrow-left" [class.end]="leftArrowEnd" [hidden]="!showArrow" (click)="updateScrollBar(true)">
  <i nz-icon nzType="left"></i>
</div>

<div class="tab-container" #container (DOMMouseScroll)="scroll($event)">
  <div class="tab-container-wrapper">
    <!-- 这里遍历tab导航按钮 -->
    <div class="tab-item" [class.tab-item-fixed]="tab.fixed" *ngFor="let tab of tabList;let index = index" [class.active]="tab.active"
         (click)="switchTab(tab)"
         (contextmenu)="showContextMenu($event,tab)">
      <!-- 这里展示tab名称 -->
      <a class="item-content" nz-tooltip [nzTitle]="tab.title" [nzMouseEnterDelay]="1">
        <!-- <i nz-icon nzType="left" class="nav-back" *ngIf="!!tab.history[0] && tab.active" (click)="back(tab);$event.stopPropagation()"></i> -->
        <!-- <span *ngIf="tab.fixed">*</span> -->
        {{tab.title}}
      </a>
      <!-- 这里展示关闭按钮 -->
      <i class="unex unex-icon-close close" *ngIf="tabList.length > 1 && tab.closeable && !tab.fixed"
         (click)="close(tab,index);$event.stopPropagation();"></i>
    </div>
  </div>
</div>

<div class="arrow-right" [class.end]="rightArrowEnd" [hidden]="!showArrow" (click)="updateScrollBar(false)">
  <i nz-icon nzType="right"></i>
</div>

<nz-dropdown-menu #contextMenu>
  <ul nz-menu nzInDropDown>
    <li nz-menu-item (click)="copyTab(currContextMenuTab)"
        [nzDisabled]="!currContextMenuTab || currContextMenuTab?.url === '/person/forewarn' || currContextMenuTab?.url === '/person/home'"
        [class.no-events]="!currContextMenuTab || currContextMenuTab?.url === '/person/forewarn' || currContextMenuTab?.url === '/person/home'">新开
    </li>
    <li nz-menu-item (click)="refreshTab()" [nzDisabled]="!activeRefreshTab" [class.no-events]="!activeRefreshTab">刷新</li>
    <li nz-menu-item (click)="switchFixTab()">
      <span *ngIf="currContextMenuTab && currContextMenuTab.fixed">取消固定</span>
      <span *ngIf="currContextMenuTab && !currContextMenuTab.fixed">固定</span>
    </li>
    <li nz-menu-divider></li>
    <li nz-menu-item (click)="closeOtherTab()" [nzDisabled]="tabList.length <= 1" [class.no-events]="tabList.length <= 1">关闭其他页签</li>
    <li nz-menu-item (click)="closeRightTab()" [nzDisabled]="!activeCloseRightTab" [class.no-events]="!activeCloseRightTab">关闭右侧页签</li>
    <li nz-menu-item (click)="closeAllTab()">关闭全部页签</li>
  </ul>
</nz-dropdown-menu>
